<template>
	<div class="dashboard-editor-container">
		<div class=" clearfix card">
			<!-- <pan-thumb style="float: left" :image="avatar"> 你的权限:
				<span class="pan-info-roles" v-for="item in roles">{{item}}</span>
			</pan-thumb> -->
			<div class="info-container">
				<span class="display_name">{{userInfo['name']?userInfo['name']:name}}</span>
				<!-- <span style='font-size:20px;padding-top:20px;display:inline-block;'>学员排行</span> -->

				<el-button v-if="roles.indexOf('hr')!=-1" @click="goFavoritePanel()">关注列表</el-button>
				<el-button v-if="roles.indexOf('hr')!=-1" @click="goHrSetting()">猎头信息设置</el-button>
			</div>
		</div>
		<div class="card" style="margin-top:20px;overflow:hidden;">

			<div class="left-content">
				<div class="hd">
					<h2 class="tit" style="color:#324157;">学员积分排行榜</h2>
				</div>

				<div v-for="(student,index) in credit_ranking_list" :key="index" class="item">
					<router-link :to="'/student/'+student.id">
						<img :src="student.head_url" alt="">
						<p class="name">{{student.name}}
							<span class="credit-text">积分{{getCredit(student.credit)}}</span>
						</p>
					</router-link>
				</div>

			</div>
			<div class="right-content">
				<div class="view-ranking" style="width:365px;">
					<div class="hd">
						<h2 class="tit">热门学员查阅</h2>
					</div>
					<div class="rank-hd">
						<div class="game">学员</div>
						<div class="qdz">浏览次数</div>
						<div class="cz">操作</div>
					</div>
					<ul>
						<li class="item item-top" v-for="(item,index) in view_ranking_list" :key="index">
							<a href="javascript:;" class="item-con">
								<span class="num">{{index+1}}</span>
								<span class="game">
									<span class="pic">
										<img :src="item.head_url" width="50" height="50" alt="">
									</span>
									<span class="text">
										<span class="tit">{{item.name}}</span>
										<!-- <span class="dec">{{item.name}}</span> -->
									</span>
								</span>
								<span class="state">
									<span class="c1">{{item.view_count}}次</span>
									<router-link :to="'/student/'+item.student_id">
										<span class="c3 comm-btn">查看</span>
									</router-link>
								</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="view-ranking" style="width:365px;">
					<div class="hd">
						<h2 class="tit">最新加入学员</h2>
					</div>
					<div class="rank-hd">
						<div class="game" style="width:190px;">学员</div>
						<div class="qdz" style="110px">加入时间</div>
						<div class="cz">操作</div>
					</div>
					<ul>
						<li class="item item-top" v-for="(item,index) in recent_student_list" :key="index">
							<a href="javascript:;" class="item-con">
								<span class="num">{{index+1}}</span>
								<span class="game" style="width:150px;">
									<span class="pic">
										<img :src="item.head_url" width="50" height="50" alt="">
									</span>
									<span class="text">
										<span class="tit">{{item.name}}</span>
										<!-- <span class="dec">{{item.name}}</span> -->
									</span>
								</span>
								<span class="state" style="width:180px;">
									<span class="c1" style="width:120px;">{{item.create_time}}</span>
									<router-link :to="'/student/'+item.id">
										<span class="c3 comm-btn">查看</span>
									</router-link>
								</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import PanThumb from 'components/PanThumb';
import { getHomeInfo } from 'api/remoteSearch'

export default {
	name: 'dashboard-default',
	components: { PanThumb },
	data() {
		return {
			view_ranking_list: [],
			recent_student_list: [],
			credit_ranking_list: [],
			userInfo:{} //存放学员信息或者公司信息 目前只有名字
		}
	},
	mounted() {
		this.fetchHomeInfo()
	},
	computed: {
		...mapGetters([
			'user_id',
			'name',
			'avatar',
			'roles'
		])
	},
	methods: {
		fetchHomeInfo() {
			let vm = this;
			getHomeInfo(vm.user_id).then(res => {
				console.log(res)
				if (res.data.status == 'success') {
					vm.view_ranking_list = res.data.data.view_ranking_list;
					vm.recent_student_list = res.data.data.recent_student_list;
					vm.credit_ranking_list = res.data.data.credit_ranking_list;
					if(res.data.data.user_info!=undefined){
					vm.userInfo=res.data.data.user_info;
					}
				}
			}).catch(err => {

			})
		},
		getCredit(credit) {
			if (credit == null || credit == undefined) {
				return 0
			} else {
				return Math.floor(credit)
			}
		},
		goFavoritePanel(){
			this.$router.push({path:"/favorite/favoriteStudent"})
		},
		goHrSetting(){
			this.$router.push({path:"/hr/info"})
		}
	}
}
</script>
<style scoped>

.right-content {
	float: right;
	overflow: hidden;
}

.card {
	overflow: hidden;
	background-color: white;
	padding: 20px;
	box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
}

.view-ranking {
	width: 365px;
	margin: 0px;
	min-height: 500px;
}

.left-content {
	float: left;
	min-width: 750px;
	width: calc(100% - 405px);
}

.left-content .item {
	/* border-radius: 5px; */
	margin: 10px;
	float: left;
	padding: 10px;
	/* box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1); */
	transition: all ease-out .3s;
}

.left-content .item:hover {
	cursor: pointer;
	/* color:white; */
	/* background-color: #8391a5; */
	box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.2);
	margin-top: 5px;
}

.left-content .item img {
	height: 206px;
	width: 147.5px;
}

.left-content .item .name {
	padding-left: 5px;
}

.left-content .item .credit-text {
	float: right;
	color: rgb(153, 153, 153);
}

.rank-hd {
	height: 35px;
	line-height: 35px;

	color: #dcdcdc;
	background-color: #4b4948;
}

.rank-hd .game {
	padding-left: 30px;
	width: 206px;
	text-align: left;
}

.rank-hd .game {
	float: left;
	width: 230px;
}

.rank-hd .qdz {
	width: 68px;
	float: left;
}

.rank-hd .cz {
	width: 60px;
	text-align: center;
	float: left;
}

.view-ranking p {
	float: left;
}

.view-ranking img {
	float: left;
	width: 40px;
	height: 40px;
	border-radius: 20px;
}

.view-ranking span {
	line-height: 40px;
}

.view-ranking ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

.view-ranking item {
	overflow: hidden;
	width: 100%;
}

.view-ranking .item-con {
	display: block;
	border-bottom: 1px solid #bfcbd9;
	position: relative;
	width: 100%;
	line-height: 39px;
	color: #333;
	cursor: auto;
	height: 50px;
	padding: 12px 0;
	line-height: 1.7;
	box-sizing: content-box;
}

.item-con::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 0%;
	height: 1px;
	background-color: #31b56e;
	width: 0;
	-webkit-transition: width .5s;
	transition: width .5s;
	display: none;
}

.item-con:hover::after {
	width: 100%;
}

.item-con:after {
	display: table;
	content: "";
	clear: both;
}

.item-con .num {
	float: left;
	width: 30px;
	height: 50px;
	color: #999;
	font-family: Georgia;
	font-size: 18px;
}

.item-con .game {
	float: left;
	width: 180px;
	height: 50px;
	overflow: hidden;
}

.item-con .state {
	float: right;
	width: 130px;
	height: 50px;
	overflow: hidden;
}

.item-con .game .pic {
	float: left;
	width: 50px;
	margin-right: 15px;
	margin-top: 5px;
}

.item-con .game .text .tit {
	font-size: 16px;
	white-space: nowrap;
	width: 12em;
	line-height: 50px;
	overflow: hidden;
}

.item-con .game .text .dec {
	color: #999;
}

.state .c1 {
	line-height: 50px;
}

.item-con .state .c1 {
	float: left;
	width: 3.5em;
	overflow: hidden;
	color: #999;
}

.item-con .state .c3 {
	height: 45px;
	line-height: 45px;
	float: right;
}

.item-con {}

.comm-btn {
	display: block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	z-index: 3;
	-webkit-transition: color .3s;
	transition: color .3s;
	border: 1px solid #83d3a8;
	width: 53px;
	height: 23px;
	line-height: 23px;
	text-align: center;
}

.comm-btn::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #31b56e;
	width: 0;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
}

.comm-btn:hover::before {
	width: 100%;
}

.item-con .state {
	float: right;
	width: 130px;
	overflow: hidden;
}

.hd {
	height: 60px;
	line-height: 60px;
	overflow: hidden;
}

.hd .tit {
	margin: 0px;
	color: #31b56e;
	font-size: 24px;
	float: left;
}
</style>



<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
	background-color: #e3e3e3;
	min-height: 100vh;
	margin-top: -50px;
	padding: 100px 60px 0px;
	.pan-info-roles {
		font-size: 12px;
		font-weight: 700;
		color: #333;
		display: block;
	}
	.info-container {
		position: relative;
		// margin-left: 190px;
		height: 150px;
		line-height: 200px;
		.display_name {
			font-size: 48px;
			line-height: 48px;
			color: #212121;
			position: absolute;
			top: 25px;
		}
	}
}
</style>
